<template>
  <q-virtual-scroll class="q-space" flat bordered type="table" separator="cell" :items="items">
    <template v-slot:before>
      <thead class="sticky-thead narrow">
        <tr :class="$q.dark.isActive ? 'bg-blue-grey-7' : 'bg-grey-3 text-primary'">
          <th style="width: 1px">#</th>
          <th
            v-for="col in columns"
            :key="col.name || col.label"
            class="sticky"
            :class="getItemField(col, null, col.headClass || col.class)"
            :style="getItemField(col, null, col.headStyle || col.style)"
            @click="onClickHead(col)"
          >
            {{ col.label }}
          </th>
        </tr>
      </thead>
    </template>
    <template v-slot="{ item, index }">
      <tr :key="index" class="narrow">
        <td
          class="text-right text-primary"
          :class="$q.dark.isActive ? 'bg-blue-grey-10' : 'bg-blue-1'"
          style="width: 1px"
          @click="onClickItem(item, null, index)"
        >
          {{ index + 1 }}
        </td>
        <td
          v-for="col in columns"
          :key="`${index}-${col.name || col.label}`"
          class="text-select"
          :class="getItemField(item, index, col.class)"
          :style="getItemField(item, index, col.style)"
          @click="onClickItem(item, col, index)"
        >
          <template v-if="!col.type || col.type === 'text'">
            {{ getItemField(item, index, col.field) }}
          </template>
          <div v-html="getItemField(item, index, col.field)" v-if="col.type === 'html'" />
          <component :is="col.type" v-bind="{ ...getItemField(item, index, col.field) }" v-else />
        </td>
      </tr>
    </template>
  </q-virtual-scroll>
</template>

<script>
// 【数据项列表】
export default {
  props: {
    items: {
      // 数据项列表
      type: Array,
      required: true
    },
    columns: {
      // 数据列定义列表，每项为：{ name: 列名（可选，用于唯一标识）, label: 列标题, field: 字段名或字段取值函数（格式为：(数据项, 序号) => 字段值）,
      // type: 内容类型（可为text/html/组件，空表示text）, class: 单元格样式类, style: 单元格样式,
      // headClass: 标头单元格样式类（默认取class）, headStyle: 标头单元格样式（默认取style） }
      type: Array,
      required: true
    }
  },

  methods: {
    // 获取数据项字段值
    getItemField(item, index, field) {
      return field instanceof Function ? field(item, index) : item[field] || field
    },

    // 单击数据列标头
    // - @col 点击的数据列定义
    onClickHead(col) {
      this.$emit('click-head', col)
    },

    // 单击选中数据项
    // - @item 数据项
    // - @col 点击的数据列定义（序号列为null）
    // - @index 数据项序号
    onClickItem(item, col, index) {
      this.$emit('select', item, col, index)
    },

    // 双击使用数据项
    // - @item 数据项
    // - @col 点击的数据列定义（序号列为null）
    // - @index 数据项序号
    onDblClickItem(item, col, index) {
      this.$emit('use', item, col, index)
    }
  }
}
</script>
